<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'test.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript" src="<%=path %>/resource/js/jquery-1.7.2.js"></script>
	<script type="text/javascript">
		function test(){
			var chb=$("input[type=checkbox]:checked");
			if(chb.length!=1)
				alert("选择一个");
			else{
				var left=chb.parent();
				var nheight=(left.height()+40)+"px";
				var leftnext=left.next();
				left.css("height",nheight);
				leftnext.css("height",nheight);
				var leftcont=leftnext.html();
				var ss=$(leftnext).find("ul").size();
				if(ss==0){
					
					leftnext.html("");
					leftnext.append("<ul style='width:100px;'><li>"+leftcont+"</li></ul>");
					leftnext.children("ul").append("<li class='topline'>xxx</li>");
				}else{
					leftnext.children("ul").append("<li class='topline'>xxx</li>");
				}
				
			}
			
		}
	
	</script>
<style type="text/css">
ul,li {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baselinebaseline;
	background: transparent;
	list-style-type: none;
}

.ta {
	border: 1px #ccc solid;
	width: 200px;
}

ul {
	width: 200px;
}

ul li {
	width: 100px;
	height: 40px;
	float: left;
}

ul li.leftone {
	border-bottom: 1px #ccc solid;
	width: 100px;
	height: 39px;
}
ul li.topline {
	border-top: 1px #ccc solid;
	width: 100px;
	height: 39px;
}
ul li.righttwo {
	border-left: 1px #ccc solid;
	width: 99px;
	height: 40px;
}

ul li.rightone {
	width: 100px;
	height: 40px;
}

ul li.lefttwo {
	border-left: 1px #ccc solid;
	width: 99px;
	height: 39px;
	border-bottom: 1px #ccc solid;
}
</style>
</head>

<body>
	<div class="ta">
		<ul>
			<li class="leftone"><input type="checkbox"/>不锈钢</li>
			<li class="lefttwo">
				fsddf
			</li>
			<li class="rightone"><input type="checkbox"/>铜类</li>
			<li class="righttwo">222</li>
		</ul>
		<div style="clear:both"></div>
	</div>
	<input type="button" value="添加" onclick="test()">
</body>
</html>
